<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站活动列表样式</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 通用样式 */
        .event-demo {
            margin-bottom: 4rem;
            padding: 2rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
        }
        
        .demo-title {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eaeaea;
        }
        
        .event-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .event-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }
        
        .host-info img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .stats {
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        .stats i {
            margin-right: 4px;
        }
        
        .action-buttons button {
            transition: all 0.2s ease;
        }
        
        .action-buttons button:hover {
            transform: scale(1.05);
        }
        
        .event-date {
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            display: inline-block;
        }
        
        .event-status {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
        }
        
        .status-upcoming {
            background-color: #e0f2fe;
            color: #0284c7;
        }
        
        .status-hot {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        .status-ended {
            background-color: #e5e7eb;
            color: #6b7280;
        }
        
        /* 样式1：卡片式活动列表 */
        .style-1 .event-card {
            border: 1px solid #eaeaea;
        }
        
        .style-1 .event-image {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .style-1 .event-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .style-1 .event-card:hover .event-image img {
            transform: scale(1.03);
        }
        
        .style-1 .event-image .event-date {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        .style-1 .event-content {
            padding: 1.25rem;
        }
        
        /* 样式2：紧凑信息式 */
        .style-2 .event-card {
            border: none;
            border-bottom: 1px solid #eaeaea;
            padding: 1rem 0;
        }
        
        .style-2 .event-card:last-child {
            border-bottom: none;
        }
        
        .style-2 .event-image {
            max-height: 140px;
            overflow: hidden;
            border-radius: 6px;
        }
        
        .style-2 .event-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-2 .event-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.5rem 0;
        }
        
        /* 样式3：突出日期式 */
        .style-3 .event-card {
            border: 1px solid #eaeaea;
            background-color: white;
        }
        
        .style-3 .event-header {
            padding: 1rem;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .style-3 .event-date-large {
            text-align: center;
            background-color: #3b82f6;
            color: white;
            padding: 0.5rem;
            border-radius: 6px;
            min-width: 70px;
        }
        
        .style-3 .date-day {
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 1;
        }
        
        .style-3 .date-month {
            font-size: 0.875rem;
            text-transform: uppercase;
        }
        
        .style-3 .event-body {
            padding: 1rem;
        }
        
        .style-3 .multi-image {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
            height: 120px;
        }
        
        .style-3 .multi-image img {
            flex: 1;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
        
        /* 样式4：无图活动风格 */
        .style-4 .event-card {
            border-left: 4px solid #3b82f6;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .style-4 .event-content {
            padding: 1.25rem;
        }
        
        .style-4 .event-details {
            background-color: #f8fafc;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid #e2e8f0;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        
        .style-4 .detail-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .style-4 .detail-item i {
            color: #3b82f6;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-2 .event-image {
                margin-bottom: 1rem;
            }
            
            .style-3 .multi-image {
                flex-direction: column;
                height: auto;
            }
            
            .style-3 .multi-image img {
                height: 100px;
            }
            
            .action-buttons {
                margin-top: 0.75rem;
            }
            
            .style-4 .event-details {
                flex-direction: column;
                gap: 0.75rem;
            }
        }
    </style>
</head>
<body class="p-4 bg-light">
    <div class="container">
        <h1 class="text-center mb-5">社交网站活动列表样式</h1>
        
        <!-- 样式1：卡片式活动列表 -->
        <div class="event-demo style-1 bg-white">
            <h3 class="demo-title">1. 卡片式活动列表</h3>
            
            <!-- 带单张图片的活动 -->
            <div class="event-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="event-image">
                            <img src="https://picsum.photos/600/400?random=21" alt="户外徒步活动照片">
                            <span class="event-date"><i class="far fa-calendar-alt me-1"></i> 10月25日</span>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="event-content">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="host-info d-flex align-items-center">
                                    <img src="https://picsum.photos/100/100?random=201" alt="活动组织者头像">
                                    <div class="ms-2">
                                        <div class="font-medium">自然爱好者协会</div>
                                        <div class="text-sm text-muted">发布于 3天前</div>
                                    </div>
                                </div>
                                <span class="event-status status-hot"><i class="fas fa-fire me-1"></i> 热门</span>
                            </div>
                            
                            <h5 class="event-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">秋季户外徒步：探索城市周边自然美景</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">周末一起逃离城市喧嚣，探索周边自然保护区的秋季美景。活动包含专业向导带领、野外生存技巧分享，适合所有年龄段的自然爱好者...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 2.4k</span>
                                    <span><i class="far fa-comment"></i> 87</span>
                                    <span><i class="far fa-user"></i> 128人已报名</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-user-plus me-1"></i> 报名
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带多张图片的活动 -->
            <div class="event-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="event-image" style="display: flex; gap: 3px; height: 200px;">
                            <img src="https://picsum.photos/300/400?random=22" alt="音乐节照片1" style="flex: 1;">
                            <div style="flex: 1; display: flex; flex-direction: column; gap: 3px;">
                                <img src="https://picsum.photos/300/200?random=23" alt="音乐节照片2" style="flex: 1;">
                                <img src="https://picsum.photos/300/200?random=24" alt="音乐节照片3" style="flex: 1;">
                            </div>
                            <span class="event-date"><i class="far fa-calendar-alt me-1"></i> 11月5日</span>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="event-content">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="host-info d-flex align-items-center">
                                    <img src="https://picsum.photos/100/100?random=202" alt="活动组织者头像">
                                    <div class="ms-2">
                                        <div class="font-medium">城市音乐联盟</div>
                                        <div class="text-sm text-muted">发布于 1周前</div>
                                    </div>
                                </div>
                                <span class="event-status status-upcoming"><i class="fas fa-clock me-1"></i> 即将开始</span>
                            </div>
                            
                            <h5 class="event-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">城市独立音乐节：发现新兴音乐力量</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">汇聚本地最具潜力的独立音乐人，带来一天不间断的现场表演。从民谣到摇滚，从电子到爵士，多元化的音乐风格满足不同听众的需求...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 5.7k</span>
                                    <span><i class="far fa-comment"></i> 234</span>
                                    <span><i class="far fa-user"></i> 356人已报名</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-user-plus me-1"></i> 报名
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：紧凑信息式 -->
        <div class="event-demo style-2 bg-white">
            <h3 class="demo-title">2. 紧凑信息式活动列表</h3>
            
            <!-- 带图片的活动 -->
            <div class="event-card">
                <div class="row">
                    <div class="col-md-3">
                        <div class="event-image">
                            <img src="https://picsum.photos/400/300?random=25" alt="读书会活动照片">
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="event-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">月度读书会：《未来简史》深度讨论</a>
                                </h6>
                                <span class="event-status status-upcoming">即将开始</span>
                            </div>
                            
                            <div class="event-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 10月20日 19:00</span>
                                <span><i class="fas fa-map-marker-alt me-1"></i> 城市图书馆</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">一起探讨尤瓦尔·赫拉利的《未来简史》，分享对人类未来的思考与见解，欢迎所有爱书人参加...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="host-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=203" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">读书会社群</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 1.2k</span>
                                        <span><i class="far fa-user"></i> 42人已报名</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的活动 -->
            <div class="event-card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="event-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">线上编程工作坊：Python数据分析入门</a>
                                </h6>
                                <span class="event-status status-upcoming">即将开始</span>
                            </div>
                            
                            <div class="event-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 10月22日 20:00</span>
                                <span><i class="fas fa-laptop me-1"></i> 线上直播</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">适合编程初学者的Python数据分析入门工作坊，将介绍Pandas基础操作和数据可视化方法，参与者可获得练习资料...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="host-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=204" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">编程学习联盟</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 3.5k</span>
                                        <span><i class="far fa-user"></i> 512人已报名</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带图片的活动 -->
            <div class="event-card">
                <div class="row">
                    <div class="col-md-3">
                        <div class="event-image">
                            <img src="https://picsum.photos/400/300?random=26" alt="志愿者活动照片">
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="event-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">社区环保行动：城市公园清洁日</a>
                                </h6>
                                <span class="event-status status-ended">已结束</span>
                            </div>
                            
                            <div class="event-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 10月15日 09:00</span>
                                <span><i class="fas fa-map-marker-alt me-1"></i> 中央公园</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">一起参与城市公园清洁活动，维护绿色环境，共建美好社区。活动提供清洁工具和志愿者证书...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="host-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=205" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">绿色家园协会</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 2.8k</span>
                                        <span><i class="far fa-user"></i> 87人参与</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-secondary rounded-pill" disabled>
                                        <i class="fas fa-check"></i> 已结束
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：突出日期式 -->
        <div class="event-demo style-3 bg-white">
            <h3 class="demo-title">3. 突出日期式活动列表</h3>
            
            <!-- 带多张图片的活动 -->
            <div class="event-card">
                <div class="event-header">
                    <div class="event-date-large">
                        <div class="date-day">30</div>
                        <div class="date-month">十月</div>
                    </div>
                    <div class="host-info d-flex align-items-center">
                        <img src="https://picsum.photos/100/100?random=206" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">创意市集组委会</div>
                            <div class="text-sm text-muted">创意活动 · 2周前发布</div>
                        </div>
                    </div>
                    <span class="event-status status-hot"><i class="fas fa-fire me-1"></i> 热门</span>
                </div>
                
                <div class="event-body">
                    <h5 class="event-title">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">城市创意市集：手作与艺术的盛宴</a>
                    </h5>
                    
                    <p class="text-muted mb-3">汇聚本地最具创意的手作人、设计师和艺术家，展示独特的手工艺品、艺术品和创意产品。现场还有音乐表演和互动工作坊...</p>
                    
                    <div class="multi-image">
                        <img src="https://picsum.photos/400/300?random=27" alt="创意市集照片1">
                        <img src="https://picsum.photos/400/300?random=28" alt="创意市集照片2">
                        <img src="https://picsum.photos/400/300?random=29" alt="创意市集照片3">
                    </div>
                    
                    <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 gap-3">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-clock"></i> 10:00 - 20:00</span>
                            <span><i class="fas fa-map-marker-alt"></i> 文化创意园区</span>
                            <span><i class="far fa-user"></i> 246人已报名</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 喜欢 (328)
                            </button>
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="fas fa-user-plus me-1"></i> 立即报名
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带单张图片的活动 -->
            <div class="event-card">
                <div class="event-header">
                    <div class="event-date-large">
                        <div class="date-day">05</div>
                        <div class="date-month">十一月</div>
                    </div>
                    <div class="host-info d-flex align-items-center">
                        <img src="https://picsum.photos/100/100?random=207" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">创业孵化器</div>
                            <div class="text-sm text-muted">创业活动 · 3周前发布</div>
                        </div>
                    </div>
                    <span class="event-status status-upcoming"><i class="fas fa-clock me-1"></i> 即将开始</span>
                </div>
                
                <div class="event-body">
                    <h5 class="event-title">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">初创企业融资路演：与投资人面对面</a>
                    </h5>
                    
                    <p class="text-muted mb-3">为初创企业提供展示机会，与多位天使投资人和VC面对面交流。活动包含项目路演、投资人分享和自由交流环节，适合寻求融资的创业团队...</p>
                    
                    <div class="event-image mb-3">
                        <img src="https://picsum.photos/1200/400?random=30" alt="创业路演活动照片" class="w-100" style="border-radius: 6px;">
                    </div>
                    
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-clock"></i> 14:00 - 18:00</span>
                            <span><i class="fas fa-map-marker-alt"></i> 创业中心会议厅</span>
                            <span><i class="far fa-user"></i> 78人已报名</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 喜欢 (156)
                            </button>
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="fas fa-user-plus me-1"></i> 立即报名
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：无图活动风格 -->
        <div class="event-demo style-4 bg-white">
            <h3 class="demo-title">4. 无图活动列表（适合线上活动和简洁展示）</h3>
            
            <!-- 无图活动1 -->
            <div class="event-card">
                <div class="event-content">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="event-title">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">心理健康讲座：压力管理与情绪调节</a>
                        </h5>
                        <span class="event-status status-upcoming">即将开始</span>
                    </div>
                    
                    <p class="text-muted mb-3">由资深心理咨询师主讲的线上讲座，探讨现代生活中的压力来源和有效的情绪调节方法，帮助参与者建立健康的心理状态...</p>
                    
                    <div class="host-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=208" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">心灵成长空间</div>
                            <div class="text-sm text-muted">心理健康 · 5天前发布</div>
                        </div>
                    </div>
                    
                    <div class="event-details">
                        <div class="detail-item">
                            <i class="far fa-calendar-alt"></i>
                            <span>10月28日 19:30-21:00</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-laptop"></i>
                            <span>线上Zoom会议</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-user"></i>
                            <span>124人已报名</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-eye"></i>
                            <span>3.2k 浏览</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <button class="btn btn-sm btn-outline-primary rounded-pill">
                            <i class="far fa-thumbs-up me-1"></i> 215
                        </button>
                        <button class="btn btn-sm btn-outline-secondary rounded-pill">
                            <i class="far fa-bookmark me-1"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-primary rounded-pill">
                            <i class="fas fa-user-plus me-1"></i> 报名参加
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图活动2 -->
            <div class="event-card">
                <div class="event-content">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="event-title">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">线上语言交换：英语-中文双语交流会</a>
                        </h5>
                        <span class="event-status status-upcoming">即将开始</span>
                    </div>
                    
                    <p class="text-muted mb-3">为英语学习者和中文学习者提供的语言交换平台，通过主题讨论、自由交流等形式提高语言能力，结识国际朋友...</p>
                    
                    <div class="host-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=209" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">语言交换社区</div>
                            <div class="text-sm text-muted">文化交流 · 1周前发布</div>
                        </div>
                    </div>
                    
                    <div class="event-details">
                        <div class="detail-item">
                            <i class="far fa-calendar-alt"></i>
                            <span>每周六 20:00-21:30</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-laptop"></i>
                            <span>线上腾讯会议</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-user"></i>
                            <span>89人已报名</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-eye"></i>
                            <span>2.7k 浏览</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <button class="btn btn-sm btn-outline-primary rounded-pill">
                            <i class="far fa-thumbs-up me-1"></i> 187
                        </button>
                        <button class="btn btn-sm btn-outline-secondary rounded-pill">
                            <i class="far fa-bookmark me-1"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-primary rounded-pill">
                            <i class="fas fa-user-plus me-1"></i> 报名参加
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 为交互按钮添加功能
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('button:has(.far.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-thumbs-up');
                    if (icon) {
                        // 切换图标
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-primary');
                        this.classList.toggle('btn-primary');
                        
                        // 更新点赞数（如果有）
                        if (this.textContent.match(/\d+/)) {
                            let countText = this.textContent.trim();
                            let count = parseInt(countText.match(/\d+/)[0]);
                            count = icon.classList.contains('fas') ? count + 1 : count - 1;
                            this.innerHTML = `${icon.outerHTML} ${this.textContent.includes('喜欢') ? '喜欢' : ''} ${count > 0 ? `(${count})` : ''}`.trim();
                        }
                    }
                });
            });
            
            // 收藏按钮交互
            const bookmarkButtons = document.querySelectorAll('button:has(.far.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-bookmark');
                    if (icon) {
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-secondary');
                        this.classList.toggle('btn-success');
                    }
                });
            });
            
            // 报名按钮交互
            const registerButtons = document.querySelectorAll('button:has(.fas.fa-user-plus)');
            registerButtons.forEach(button => {
                if (!button.disabled) {
                    button.addEventListener('click', function() {
                        const icon = this.querySelector('.fas.fa-user-plus');
                        if (icon) {
                            // 切换为已报名状态
                            this.innerHTML = '<i class="fas fa-check me-1"></i> 已报名';
                            this.classList.remove('btn-primary');
                            this.classList.add('btn-success');
                            
                            // 更新已报名人数
                            const countElement = this.closest('.event-card').querySelector('.stats span:has(.far.fa-user)');
                            if (countElement) {
                                let countText = countElement.textContent;
                                let count = parseInt(countText.match(/\d+/)[0]);
                                countElement.textContent = countText.replace(/\d+/, count + 1);
                            }
                            
                            // 禁用按钮
                            this.disabled = true;
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
    
